<template>
  <div class='page-layer'>
    <el-container class="page-layer-content ">
      <!--头部一级菜单-->
      <el-header class="head" height="65px">
        <div class="head-block">
          <div class="head-menus">
            <div class="head-menu-block" :class="{'active':currentFirstIndex==index}" v-for="(item,index) in firstMenus" :key="item.url" 
              @click="choiceFirstMenu(item.url,index)">
              <img :src="item.imgurl" alt="" v-if="item.imgurl">
              <div class="head-menu-content">{{item.text}}</div>
            </div>
          </div>
          <div class="head-menus">
            <div class="head-user-block">
              <el-dropdown trigger="click" placement="bottom">
                <div class="user-name">
                  <img class="headimg" src="/static/image/icon-more.png" alt="">
                  <div class="name">{{$store.state.userData.loginname}}</div>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="the-dropdown-item for-align" @click.native="toChangeHostname()">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                    <div>配置</div>
                  </el-dropdown-item>
                  <el-dropdown-item class="the-dropdown-item for-align" @click.native="loginOut()">
                    <i class="fa fa-power-off" aria-hidden="true"></i>
                    <div>退出</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <!--一级菜单对应内容-->
      <el-container class="page-lay-content-bottom">
        <!--左侧菜单或者树结构-->
        <el-aside class="second-menu" :width="secondMenuWidth">
          <!--系统设置、运营管理菜单内容-->
          <div class="second-menu-block menu-box" v-if="getCurrrentRouter!='/livePreview'&&getCurrrentRouter.indexOf('/replayVideo')==-1&&currentSecondMenus.length>0">
            <el-menu class="el-menu-vertical" text-color="#ffffff" active-text-color="#ffffff"
              :default-active="activeMenuItem" :collapse="isHideSecondMenu" @select="changeRoute">
              <template v-for="item in currentSecondMenus">
                <el-submenu :index="item.url" :key="item.url" v-if="!item.leaftype">
                  <template slot="title">
                    <span class="menu-name" slot="title">{{item.text}}</span>
                  </template>
                  <template v-for="child in item.children">
                    <el-menu-item :index="child.url" :data="child" :key="child.url" v-if="!child.menutype">
                      <span class="menu-name">{{child.text}}</span>
                    </el-menu-item>
                  </template>
                </el-submenu>
                <el-menu-item :index="item.url"  :key="item.url" v-else>
                  <span class="menu-name" slot="title">{{item.text}}</span>
                </el-menu-item>
              </template>
            </el-menu>
          </div>
        </el-aside>
        <!--右侧内容-->
        <el-container class="page-lay-content-bottom-right" :style="{width: contentWidth}">
          <!--右侧内容----单页应用内容-->
          <el-main class="page-contain" :class="[getCurrrentRouter!='/livePreview'?'had-border-tip':'']">
            <!--箭头-->
            <div class="border-tip tip-left cursor-pointer" :class="{'tip-left-click':isHideSecondMenu}" @click="switchSecondMenu()" v-if="getCurrrentRouter!='/livePreview'">
              <i class="fa fa-angle-left" aria-hidden="true" v-if="!isHideSecondMenu"></i>
              <i class="fa fa-angle-right" aria-hidden="true" v-else></i>
            </div>
            <router-view ref="pagechild" :second-menu-width="secondMenuWidth" :resize-height="resizeNum"></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <div class="dialog-model allscreen canDrag" v-if="showDialog">
      <div class="dialog-model-content" style="width:452px;top:36%;left:calc(50% - 226px);" v-drag>
        <div class="dialog-model-head">
          配置视频服务器地址<div class="img-close cursor-pointer" @click="showDialog=false"></div>
        </div>
        <div class="dialog-model-body">
          <div class="body-info">
            <div class="body-info-attrs">
              <el-form :model="formData" ref="formData" class="form-check">
                <el-form-item prop="hostname" style="width:calc(100% - 40px);" :rules="[{ required: true, message: '视频服务器地址', trigger: 'change'}]">
                  <el-input class="body-info-attr" style="width:100%;" placeholder="视频服务器地址如：http://liveoss.com" size="medium" type="text" v-model="formData.hostname">
                    <template slot="prepend"><span class="sinal">*</span>视频服务器地址</template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="body-info-btns">
              <el-button class="body-info-btn" type="primary" size="medium" @click="saveFormData()">确定</el-button>
              <el-button class="body-info-btn" type="primary" size="medium" @click="showDialog=false">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions } from "vuex"
export default {
  name: "contain",
  data() {
    return {
      firstMenus: [],//一级菜单列表
      isHideSecondMenu: false,//收起或者展开二级菜单,默认不收起来
      secondMenuWidth: "280px",//二级菜单宽度
      contentWidth: (window.innerWidth-280)+"px",//右侧内容宽度--兼容360浏览器
      resizeNum: 0,//页面大小变化计数器，变化时+1
      activeMenuItem: '',//用于展开和点亮左侧菜单树
      lastMenu: "",//记录上一个打开的菜单name
      currentSecondMenus: [],
      needInitMenu: true,//需要在watch里面监听来初始化选中菜单效果,使其他通过快捷调整的菜单也有选中效果
      formData: {
        hostname: "",
      },
      showDialog: false, //是否弹出添加框
    };
  },
  computed: {
    getCurrrentRouter(){//当前打开的路由
      if(this.lastMenu!=this.$route.name){
        this.lastMenu = this.$route.name;
        this.isHideSecondMenu = false;
        this.computedSecondMenuWidth(this.$route.path);
      }
      return this.$route.path;
    },
    currentFirstIndex(){
      return this.$store.state.currentFirstMenuIndex||0;
    }
  },
  beforeDestroy(){
    //销毁小window的监听事件（function参数要与添加是的指向地址一致）
    window.removeEventListener("resize",this.resizeFct);
  },
  watch: {
    secondMenuWidth(val){
      this.resizeNum++;
    },
    "$route.name": {
      handler(newV) {
        if(this.needInitMenu){
          this.initMenu();
        }
        this.needInitMenu = true;
      },
      deep: true
    },
  },
  mounted() {
    if(!this.$store.state.userData.loginname){
      this.$router.replace({path:"/login"});
      return;
    }
    let that = this;
    that.setDeptCarData();
    window.removeEventListener("resize",that.resizeFct);
    window.addEventListener('resize', that.resizeFct, false);
    if(that.$store.state.userData.authMenuList&&that.$store.state.userData.authMenuList.length>0){//找出一级菜单
      let list = [];
      that.$store.state.userData.authMenuList.forEach(item=>{
        if(item.menutype==0){//菜单
          list.push(item);
        }
      })
      that.firstMenus = list;
    }
    that.initMenu();
  },
  methods: {
    ...mapActions(["setCurrentFirstMenuIndex","loginOutInitData","setDeptCarData"]),
    initMenu(){
      var that = this;
      that.lastMenu = that.$route.name;//以下是展开菜单树，并且计算左侧树（二级）菜单
      let activeMenuItem = that.$route.path;
      let secondObj = {},desL = 1;
      function loop(list,parent,level){
        for(let i=0;i<list.length;i++){
          if(!secondObj[level]){
            secondObj[level] = [];
          }
          secondObj[level].push(list[i]);
          if(list[i].url==that.$route.path){
            desL = level;
          }else if(!list[i].menutype&&!list[i].leaftype&&list[i].children&&list[i].children.length>0){
            loop(list[i].children,list[i],level+1);
          }
        }
      }
      loop(that.firstMenus,{},1);
      let firstIndex = 0;
      function getSecond(list,level,url){
        for(let j=0;j<list.length;j++){
          let isbreak = false;
          if(!!list[j].children){
            for(let i=0;i<list[j].children.length;i++){
              if(list[j].children[i].url==url){
                isbreak = true;
                if(level==1){
                  firstIndex = j;
                }else{
                  getSecond(secondObj[level-1],level-1,list[j].url)
                }
                break;
              }
            }
          }
          if(isbreak){
            break;
          }
        }
      }
      if(desL==1){
        firstIndex = that.firstMenus.findIndex(_=>_.url==that.$route.path);
      }else{
        getSecond(secondObj[desL-1],desL-1,that.$route.path);
      }
      that.setCurrentFirstMenuIndex(firstIndex);
      let secondMenu = [];
      if(that.firstMenus[firstIndex]&&that.firstMenus[firstIndex].children&&that.firstMenus[firstIndex].children.length>0){
        that.firstMenus[firstIndex].children.forEach(menu=>{
          if(menu.menutype=="0"||!menu.menutype){//菜单
            secondMenu.push(menu);
          }
        });
      }
      that.currentSecondMenus = secondMenu;
      that.activeMenuItem = activeMenuItem;
    },
    changeRoute(route){
      route = this.searchDefaultRoute(this.currentSecondMenus,route,2);
      if(route&&this.$route.path!==route){
        this.needInitMenu = false;
        this.$router.push({path: route,query:{}});
      }
    },
    resizeFct(e){//window监听到resize事件被触发
      this.resizeNum++;
    },
    searchDefaultRoute(menus,route,level){//在menus中查找选中route时的默认打开菜单；menutype=0菜单,leaftype=1叶子
      let result = "",activeMenuItem = route;
      let that = this;
      function loop(list,parent,_level){
        for(let i=0;i<list.length;i++){
          if(list[i].url==route){
            if(!list[i].menutype&&list[i].leaftype==1){
              result = list[i].url;
              break;
            }else if(!list[i].menutype&&!list[i].leaftype&&list[i].children&&list[i].children.length>0){//找到了，但不是叶子，要往下取下一级第一个
              let idx = list[i].children.findIndex(_=>!_.menutype);
              if(idx>-1){
                route = list[i].children[idx].url;
                activeMenuItem = route;
              }
              loop(list[i].children,list[i],_level+1);
            }
          }else if(!list[i].leaftype&&list[i].children&&list[i].children.length>0){
            loop(list[i].children,list[i],_level+1);
          }
        }
      }
      loop(menus,{},level);
      that.activeMenuItem = activeMenuItem;
      return !!result?result:route;
    },
    choiceFirstMenu(route,index){//切换菜单
      let that = this;
      if(that.$route.path!==route){
        that.needInitMenu = false;
        that.setCurrentFirstMenuIndex(index);
        let secondMenu = [];
        if(that.firstMenus[index].children&&that.firstMenus[index].children.length>0){
          that.firstMenus[index].children.forEach(menu=>{
            if(menu.menutype=="0"||!menu.menutype){//菜单
              secondMenu.push(menu);
            }
          });
        }
        that.currentSecondMenus = secondMenu;
        route = that.searchDefaultRoute(that.firstMenus,route,1);
        if(route&&that.$route.path!==route){
          that.$router.push({path: route,query:{}});
        }
        that.isHideSecondMenu = false;
      }
    },
    computedSecondMenuWidth(routePath){//计算二级菜单宽度
      if(this.isHideSecondMenu){//收起二级菜单
        if(routePath!="/livePreview"&&routePath.indexOf('/replayVideo')==-1){
          this.secondMenuWidth = "64px";
          this.contentWidth = (window.innerWidth-64)+"px";
        }else{
          this.secondMenuWidth = "0";
          this.contentWidth = (window.innerWidth-0)+"px";
        }
      }else{//展开二级菜单
        this.secondMenuWidth = "280px";
        this.contentWidth = (window.innerWidth-280)+"px";
      }
    },
    switchSecondMenu(){//收起或者展开二级菜单
      this.isHideSecondMenu = !this.isHideSecondMenu;
      this.computedSecondMenuWidth(this.$route.path);
    },
    toChangeHostname(){
      this.formData.hostname = this.$store.state.baseHost;
      this.showDialog = true;
    },
    saveFormData(){
      this.$store.state.baseHost = this.formData.hostname;
      localStorage.setItem("vod-hostname",this.formData.hostname);
      this.showDialog = false;
      location.reload();
    },
    loginOut(){//退出登录
      let that = this;
      window.removeEventListener("resize",that.resizeFct);
      that.loginOutInitData();
      that.$router.replace({path:"/login"});
    }
  }
};
</script>
<style lang="scss" scoped>
  .page-layer{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style:none;
    &::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
    .page-layer-content{
      height: 100%;
      >>> .el-radio{
        display: inline-flex;
        align-items: center;
        .el-radio__input.is-checked .el-radio__inner{
          background-color: var(--main-bg-color-act);
          border-color: var(--main-bg-color-act);
        }
        .el-radio__input.is-checked+.el-radio__label{
          color: var(--main-bg-color-act);
        }
        .el-radio__label{
          white-space: normal;
          padding-left: 5px;
        }
      }
      >>> .el-checkbox{
        display: inline-flex;
        align-items: center;
        .el-checkbox__label{
          white-space: normal;
          line-height: 1;
          padding-left: 5px;
        }
        &.is-checked{
          .el-checkbox__input.is-checked{
            .el-checkbox__inner{
              background-color: var(--main-bg-color-act);
              border-color: var(--main-bg-color-act);
            }
          }
          .el-checkbox__label{
            color: var(--main-bg-color-act);
          }
        }
      }
      >>> .el-slider{
        .el-slider__bar{
          background-color: var(--main-bg-color-act);
        }
        .el-slider__button{
          border-color: var(--main-bg-color-act);
        }
      }
      >>> .el-switch{
        &.is-checked{
          .el-switch__core{
            background-color: var(--main-bg-color-act);
            border-color: var(--main-bg-color-act);
          }
        }
      }
    }
  }
  //头部一级菜单栏
  .head{
    position: relative;
    background-color: var(--main-bg-color);
    height: 65px;
    .head-block{
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      width: 100%;
      height: 100%;
      .head-menus{
        font-size: 0;
        height: 100%;
        text-align: right;
        white-space: nowrap;
        &._center{
          display: flex;
          justify-content: center;
          flex-grow: 1;
        }
        .head-menu-block{
          position: relative;
          text-align: center;
          color: #fff;
          vertical-align: top;
          height: 100%;
          padding: 0 30px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          &.active,&:hover{
            background-color: var(--main-bg-color-act);
          }
          img{
            width: 20px;
            height: auto;
          }
          .head-menu-content{
            display: inline-block;
            margin-left: 5px;
            font-size: 14px;
            text-align: left;
          }
        }
        .head-user-block{
          display: inline-flex;
          align-items: center;
          position: relative;
          text-align: center;
          color: #fff;
          padding: 0;
          height: 100%;
          margin-left: 15px;
          cursor: pointer;
          .user-name{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            .headimg{
              width: 20px;
              height: 20px;
              margin-right: 5px;
            }
            .name{
              color: #fff;
            }
          }
        }
      }
    }
  }
  .page-lay-content-bottom{
    overflow: hidden;
    height: calc(100% - 65px);
    .page-lay-content-bottom-right{
      height: 100%;
      .page-contain{
        padding: 0;
        border: 6px solid #f3f4f5;
        background-color: #f3f4f5;
        height: 100%;
        width: 100%;
        overflow: inherit;
        position: relative;
        &.had-border-tip{
          position: relative;
          border-left: 12px solid #f3f4f5;
          box-sizing: border-box;
          .border-tip{
            position: absolute;
            top: 44%;
            height: 50px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            .fa{
              position: absolute;
              top: 26%;
              color: #fff;
              font-size: 20px;
            }
            &.tip-left{
              left: -12px;
              border-right: 12px solid var(--main-bg-color-act);
              z-index: 1;
              .fa{
                left: 2px;
              }
              &.tip-left-click{
                border-left: 12px solid var(--main-bg-color-act);
                border-right: none;
                .fa{
                  left: -9px;
                }
              }
            }
          }
        }
      }
    }
  }
  @media only screen and (max-width: 1200px) {
    .head .head-block .head-menus .head-menu-block{
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  @media only screen and (min-width: 1200px) and (max-width: 1500px) {
    .head .head-block .head-menus .head-menu-block{
      padding-left: 20px;
      padding-right: 20px;
    }
  }
</style>
<!--公共菜单样式-->
<style lang="scss">
  .el-menu--vertical{
    .el-menu--popup{//最小化--弹框样式
      min-width: unset;
      background-color: var(--main-bg-color);
      .el-menu-item{
        height: 40px;
        line-height: initial;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        &:hover{
          background-color:var(--main-bg-color-act);
          color:#fff;
        }
        .img{
          display: inline-block;
          width: auto;
          height: 18px;
        }
        &.is-active{
          background-color:var(--main-bg-color-act);
          color:#fff;
        }
        .menu-name{
          margin-left: 5px;
          flex-grow: 1;
        }
      }
    }
  }
  .second-menu{
    overflow: hidden;
    .second-menu-block{
      overflow-x: auto;
      height: 100%;
      &.menu-box{
        overflow-y: auto;
        background-color: var(--main-bg-color);
      }
    }
    .el-menu-vertical{
      height: 100%;
      box-sizing: border-box;
      border-right: none;
    }
    .el-menu{
      background-color: var(--main-bg-color);
      .el-menu-item{
        height: 40px;
        line-height: initial;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        .img{
          display: inline-block;
          width: auto;
          height: 18px;
        }
        &.is-active{
          background-color: var(--main-bg-color-act) !important;
        }
        &:hover{
          background-color: var(--main-bg-color-act) !important;
        }
        .menu-name{
          margin-left: 5px;
          flex-grow: 1;
          white-space: normal;
        }
      }
    }
    .el-submenu{
      .el-submenu__title{
        height: 40px;
        line-height: initial;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        .img{
          display: inline-block;
          width: auto;
          height: 18px;
        }
        i{
          color: #fff;
        }
        .menu-name{
          margin-left: 5px;
          flex-grow: 1;
          white-space: pre-wrap;
          padding-right: 5px;
        }
      }
    }
    .el-submenu__title:hover{
      background-color: var(--main-bg-color-act) !important;
    }
  }
</style>
<!--覆盖菜单处的树菜单样式-车辆监控和车辆选择组件-->
<style lang="scss">
.second-menu{
  .el-input__suffix{
    line-height: 30px;
    .el-input__icon{
      line-height: 30px;
    }
  }
  .tree-box{
    .el-menu-vertical{
      background-color: var(--main-bg-color);
      border-right: none;
      position: relative;
      .input-with-select{
        margin: 5px 10px;
        width: calc(100% - 20px);
        height: 30px;
        font-size: 14px;
        .el-input__inner{
          height: 30px;
          line-height: 30px;
          color: #333;
          background: transparent;
          border: 1px solid rgba(255, 255, 255, 0.1);
          padding: 0 0 0 10px;
          font-size: 13px;
          &::placeholder{
            color: #C0C4CC;
          }
        }
        .el-input-group__prepend{
          background: transparent;
          padding: 0 8px;
          border-right: none;
          border-color: rgba(255, 255, 255, 0.1);
        }
        .el-input-group__append{
          overflow: hidden;
          padding: 0 12px;
          border-color: var(--main-bg-color-act);
          background: transparent;
          border: none;
        }
        .input-with-select-btn{
          background-color: var(--main-bg-color-act);
          color: #fff;
          border-radius: 0;
          border: none;
          // padding: 8px 10px 8px 10px;
          &:hover{
            background-color: var(--main-bg-color-act);
          }
        }
        .el-input__suffix{
          line-height: 30px;
          .el-input__icon{
            line-height: 30px;
          }
        }
      }
      .filter-tree{
        height: calc(100% - 77px);
        background-color: var(--main-bg-color);
        overflow: auto;
        color: #ffffff;
        position: relative;
        font-size: 14px;
        box-sizing: border-box;
        padding-left: 10px;
      }
    }
  }
  &.treeOverMenu{
    position: absolute;
    top: -6px;
    left: -292px;
    height: calc(100% + 12px);
  }
}
</style>

<!--公共表样式-->
<style lang="scss">
.page-contain{
  .page-content{
    background-color: #ECF0F1;
    width: 100%;
    height: 100%;
    &.istable{
      position: relative;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: stretch;
      flex-direction: column;
      .head-block{
        background-color: #fff;
        padding: 10px 10px 0;
        box-sizing: border-box;
        border-radius: 4px 4px 0 0;
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
      }
      .table-block{
        position: relative;
        background-color: #fff;
        padding-top: 1px;
        box-sizing: border-box;
        border-radius: 4px;
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        .el-table{
          width: 100%;
          color: #333333;
        }
      }
      .table-header {
        margin-top: 15px;
        margin-bottom: 5px;
        .table-title {
          border-left: 4px solid var(--main-bg-color-act);
          padding-left: 10px;
          font-size: 16px;
          display: inline-block;
          white-space: nowrap;
        }
      }
    }
    &.had-tip{
      .border-tip{
        position: absolute;
        top: 44%;
        height: 50px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        .fa{
          position: absolute;
          top: 26%;
          color: #fff;
          font-size: 20px;
        }
        &.tip-right{
          right: -12px;
          border-left: 12px solid var(--main-bg-color-act);
          .fa{
            left: -9px;
          }
          &.tip-right-click{
            border-right: 12px solid var(--main-bg-color-act);
            border-left: none;
            .fa{
              left: 2px;
            }
          }
        }
      }
    }
    .el-table{
      height: 100%;
      //table高亮行
      .el-table__row.highlight-row > td{
        background-color: var(--main-bg-color-act) !important;
      }
    }
    .table-btn{
      float: right;
      margin-left: 20px;
      &.el-button{
        padding: 7px 20px 6px;
        background-color: var(--main-bg-color-act);
        border-color: var(--main-bg-color-act);
        &:hover{
          border-color: var(--main-bg-color);
          background-color: var(--main-bg-color);
        }
      }
      img{
        width: 15px;
        height: auto;
        vertical-align: top;
      }
    }
    //表内容
    td.table-row-class{
      height: 30px;
      padding: 0 !important;
      line-height: 30px;
      .cell{
        color: #333333;
      }
      &.img{
        .cell{
          img{
            height: 22px;
            width: auto;
            background-color: #666;
          }
        }
      }
      .el-button{
        padding: 4px 8px;
      }
      .ishinght{
        background-color: var(--main-bg-color-act) !important;
      }
    }
    .select{
      &:hover{
        background-color: #c5ddf9 !important;
      }
      .table-row-class{
        background-color: #c5ddf9 !important;
      }
    }
    th.table-head-class{
      background-color: #F6F6F6;
      padding: 0 !important;
      height: 28px;
      line-height: 28px;
    }
  }
}
</style>
<!--tabs样式--地图底部列表主要是--轨迹回放--和--位置监控-->
<style lang="scss">
.bottom-table-content {
  th.table-head-class{
    padding-top: 0;
    padding-bottom: 0;
    height: 28px;
    line-height: 28px;
  }
  td.table-row-class{
    height: 28px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    .el-button{
      padding: 4px 8px;
      // width: 42px;
    }
  }
}
</style>
<!--公共编辑弹出框样式dialog-model-->
<style lang="scss">
  .dialog-model{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
    &.canDrag{
      .dialog-model-content{
        position: absolute;
        margin: 0;
        height: initial;
      }
    }
    &.all-screen{
      .dialog-model-content{
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #fff;
      }
    }
    //弹出表单样式---经营路线管理
    &.alert-table{
      .dialog-model-content{
        display: flex;
        flex-direction: column;
        width: 90%;
        min-height: 400px;
        height: 80%;
        .dialog-model-head{
          flex-shrink: 0;
          flex-grow: 0;
        }
        .dialog-model-body{
          flex-shrink: 1;
          flex-grow: 1;
        }
      }
    }
    &.allscreen{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.3);
      z-index: 1400;
    }
  }
    .dialog-model-content{
      position: relative;
      width: 988px;////////////无滚动条//////////
      height: calc(100% - 120px);
      background-color: transparent;
      margin: 60px auto 0;
      border-radius: 2px;
      &.all-screen{
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #fff;
      }
      &.canDrag{
        position: absolute;
        margin: 0;
        height: initial;
        z-index: 1000;
      }
      .dialog-model-head{
        background-color: var(--main-bg-color);
        width: 100%;
        text-align: center;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        .img-screen{
          position: absolute;
          top: 10px;
          right: 40px;
          width: 22px;
          height: 22px;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 98%;
          &.img-screen-grow{
            background-image: url('/static/image/screen-grow@2x.png');
            &:hover{
              background-image: url('/static/image/screen-grow-hover@2x.png');
            }
          }
          &.img-screen-shrink{
            background-image: url('/static/image/screen-shrink@2x.png');
            &:hover{
              background-image: url('/static/image/screen-shrink-hover@2x.png');
            }
          }
        }
        .img-close{
          position: absolute;
          top: 10px;
          right: 10px;
          width: 22px;
          height: 22px;
          background-image: url('/static/image/close-white@2x.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 98%;
          &:hover{
            background-image: url('/static/image/close-white-hover@2x.png');
          }
        }
      }
      .dialog-model-body{
        height: calc(100% - 40px);;
        max-height: calc(100% - 40px);
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
        padding: 20px 0 0 20px;
        box-sizing: border-box;//////
        .body-info{
          color: #666666;
          font-size: 14px;
          .body-info-title{
            display: block;
            font-size: 16px;
            border-left: 4px solid var(--main-bg-color-act);
            height: 20px;
            line-height: 20px;
            padding-left: 10px;
            margin-bottom: 10px;
          }
          .body-info-attrs{
            width: calc(100% + 20px);
            margin-bottom: 5px;
            .form-check{
              font-size: 0px;
              .el-form-item{
                display: inline-table;
                vertical-align: top;
                margin-right: 10px;
                margin-bottom: 10px;
                &.is-error{
                  .el-form-item__content{
                    &::after{
                      height: 8px;
                      width: 8px;
                      border: 1px solid#F56C6C;
                      transform: rotate(45deg);
                      position: absolute;
                      top: 31px;
                      left: 14%;
                      background-color: #fff;
                    }
                  }
                  &.istextarea .el-form-item__content{
                    &::after{
                      top: 31px;
                    }
                    .el-form-item__error{
                      top: 100%;
                    }
                  }
                }
                .el-form-item__content{
                  line-height: inherit;
                  .body-info-attr{
                    margin-bottom: 0;
                    margin-right: 0;
                    width: 310px;
                    min-height: 36px;
                    display: inline-flex;
                    align-items: stretch;
                    font-size: 14px;
                    .sinal{
                      color: red !important;
                    }
                    .el-input__inner{
                      height: 100%;
                      flex-grow: 1;
                    }
                    .body-info-attr-label{
                      text-align: center;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      flex-shrink: 0;
                      overflow-x: auto;
                      white-space: normal;
                      width: 40%;
                      color: #333333;
                      border: 1px solid #DCDFE6;
                      background-color: #F5F7FA;
                      border-top-left-radius: 4px;
                      border-bottom-left-radius: 4px;
                      &.norightborder{
                        border-right: none;
                      }
                    }
                    &.el-input{
                      .el-input-group__prepend{
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                        width: 40%;
                        color: #333333;
                        white-space: normal;
                        overflow-x: auto;
                        flex-shrink: 0;
                      }
                      .el-input__inner{
                        height: auto;
                      }
                      .el-input-group__append{
                        padding: 0 2px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: auto;
                      }
                    }
                    &.attr-select{
                      .body-info-attr-label{
                        border-right: none;
                        &.hadbr{
                          border-right: 1px solid #DCDFE6;
                        }
                      }
                      .body-info-attr-select{
                        display: flex;
                        justify-content: flex-start;
                        align-items: stretch;
                        flex-grow: 1;
                        .el-input__inner{
                          border-top-left-radius: 0;
                          border-bottom-left-radius: 0;
                          background-color: #fff;
                          border-color: #DCDFE6;
                          color: #606266;
                          cursor: text;
                        }
                        .el-select{
                          display: flex;
                          justify-content: flex-start;
                          align-items: stretch;
                        }
                      }
                      .list-box{
                        margin-left: 10px;
                        display: inline-block;
                        vertical-align: top;
                        width: 630px;
                        .list{
                          display: flex;
                          justify-content: flex-start;
                          align-items: center;
                          flex-wrap: wrap;
                          .item{
                            padding: 8px 10px;
                            font-size: 14px;
                            border: 1px solid #DCDFE6;
                            border-radius: 4px;
                            margin: 0 10px 10px 0;
                            &.choice{
                              background-color: var(--main-bg-color);
                              color: #fff;
                            }
                          }
                        }
                      }
                    }
                    &.attr-radio{
                      .body-info-attr-radio{
                        flex-shrink: 1;
                        flex-grow: 1;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .el-radio{
                          margin-right: 0;
                          margin-left: 5px;
                          .el-radio__label{
                            padding-left: 2px;
                          }
                        }
                        &.attr-slider{
                          padding: 0 15px;
                          width: 178px;
                        }
                        &.attr-switch{
                          width: auto;
                          margin-left: 10px;
                          align-self: center;
                        }
                      }
                    }
                    &.attr-textarea{
                      .body-info-attr-label{
                        border-right: none;
                      }
                      .body-info-attr-textarea{
                        flex-grow: 1;
                        display: flex;
                        justify-content: flex-start;
                        align-items: stretch;
                        .el-textarea__inner{
                          border-radius: 0;
                        }
                      }
                    }
                    &.append-btn .el-input-group__append{
                      padding: 0 8px;
                      cursor: pointer;
                    }
                  }
                  .el-form-item__error{
                    z-index: 999;
                    border: 1px solid #F56C6C;
                    background-color: #fff;
                    border-radius: 3px;
                    padding: 2px 4px;
                  }
                }
                &.img-upload{
                  display: block;
                  .img-upload-head{
                    height: 35px;
                    line-height: 35px;
                    .img-upload-btn{
                      float: right;
                      margin-right: 20px;
                    }
                  }
                  .img-upload-preview{
                    margin: 10px auto;
                    width: 300px;
                    height: 200px;
                    border-radius: 2px;
                    border: 1px solid #E0E0E0;
                    overflow: hidden;
                    background-color: #efeded;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .audio-upload-preview{
                    width: 100%;
                    height: auto;
                    margin: 0 auto 20px;
                    audio{
                      width: 100%;
                    }
                  }
                  .video-upload-preview{
                    width: 100%;
                    height: auto;
                    margin: 0 auto 20px;
                    video{
                      width: 100%;
                    }
                  }
                  .sinal{
                    color: red !important;
                  }
                  &.fileList{
                    width: calc(100% - 40px);
                    .img-upload-head{
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      .img-upload-btn{
                        margin-right: 0;
                      }
                    }
                    .img-upload-preview-list{
                      display: flex;
                      flex-wrap: wrap;
                      width: 100%;
                      height: auto;
                      margin: 20px 0 0;
                      background: none;
                      border: none;
                      .img{
                        width: 100px;
                        position: relative;
                        margin-right: 15px;
                        img{
                          width: 100%;
                          height: auto;
                        }
                        .close{
                          position: absolute;
                          top: -24px;
                          right: -14px;
                          font-size: 20px;
                          color: #fe0505;
                          border: 1px solid red;
                          border-radius: 50%;
                          &:hover{
                            font-size: 22px;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .img-upload-btn .el-button{
                background-color: var(--main-bg-color-act);
                border-color: var(--main-bg-color-act);
                &:hover{
                  background-color: var(--main-bg-color);
                  border-color: var(--main-bg-color);
                }
              }
              .el-checkbox-group{
                display: flex;
                align-items: center;
                .el-checkbox{
                  margin: 0 0 0 10px;
                }
              }
            }
          }
          .body-info-btns{
            position: relative;
            text-align: right;
            margin-right: 20px;
            margin-bottom: 20px;
          }
          .body-info-btn{
            padding: 8px 15px;
            background-color: var(--main-bg-color-act);
            border-color: var(--main-bg-color-act);
            &:hover{
              background-color: var(--main-bg-color);
              border-color: var(--main-bg-color);
            }
            img{
              width: 16px;
              height: auto;
              vertical-align: middle;
            }
          }
          .second-menu{
            .tree-box .el-menu-vertical{
              background-color: #fff;
              .filter-tree{
                background-color: #fff;
                color: #333;
              }
            }
            &.dialog-tree{
              .el-menu-vertical{
                .input-with-select{
                  width: calc(100% - 30px);
                  .el-input-group__prepend{
                    background-color: #F5F7FA;
                    border: 1px solid #DCDFE6;
                    border-right: none;
                  }
                  .el-input__inner{
                    border-color: #DCDFE6;
                  }
                }
              }
            }
          }
        }
      }
      .dialog-model-body.dialogtable{
        padding: 0;
        .head-block{
          box-sizing: border-box;
          padding: 10px 10px 0;
        }
        .table-head-class{
          padding: 0;
        }
      }
      .dialog-model-body.tableTree{
        box-sizing: border-box;
        padding: 20px;
        .table-head-class{
          background-color: #E7E7E7;
        }
      }
    }
</style>

<!--脱离流的样式-->
<style lang="scss">
/* 右上角更多弹出框样式 */
.the-dropdown-item{
  display: flex;
  align-items: center;
  position: relative;
  font-size: 14px;
  .headimg{
    width: 20px;
    height: auto;
    margin-right: 3px;
  }
  .fa{
    color: #66b1ff;
    font-size: 20px;
  }
  .select-box{
    position: absolute;
    right: 0;
    font-size: 14px;
    left: -117px;
    top: 0px;
    width: 115px;
    background: #fff;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    display: none;
    .select-item{
      height: 32px;
      line-height: 32px;
      padding: 0 10px;
      color: #606266;
      display: flex;
      align-items: center;
      &.act,&:hover{
        color: #66b1ff;
      }
      .color{
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  &.for-align{
    padding-left: 24px;
    .for-align-i{
      margin-right: 10px;
    }
  }
  &:hover{
    .select-box{
      display: block;
    }
  }
}
</style>

<!--form表单验证不符合警告样式-->
<style >
  .dialog-model-content .dialog-model-body .body-info .body-info-attrs .form-check .el-form-item.is-error .el-form-item__content::after{
    display: none;
  }
  .page-content.instruct .form-box-body__ .el-form-item.is-required.is-error .el-form-item__content::after{
    display: none;
  }
  .el-form-item .el-form-item__content .el-form-item__error::after{
    position: absolute;
    content: "";
    top: -17px;
    left: 50%;
    margin-left: -4px;
    width: 0;
    height: 0;
    border: 8px solid;
    border-color: transparent transparent #F56C6C;
    z-index: 999;
  }
</style>
